<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<dom-module id="shop-blog">
    <template>
        <style>
            :host{
                
            }
            paper-tabs{
                --paper-tabs-selection-bar-color:#000;
                background-color: #eee;
            }
            paper-icon-item{
                border-bottom: #eee solid 1px;
            }
            paper-icon-item iron-image{
                width: 56px;
                height: 56px;
            }
            paper-icon-item paper-item-body{
                margin-left: 16px;
            }
            div[slot=item-icon]{
                width: 56px;
                height: 56px;
                background-color: #eee;
            }
            paper-list-box a{color: #333;}
            paper-list-box iron-icon{color: #999;}
            paper-input{
                background-color: #fff;
                --paper-font-subhead_-_font-size:13px;
                --paper-input-container-shared-input-style_-_font-size:13px;
                --paper-input-container-focus-color:#000;
            }
            .search{border-bottom: #eee solid 1px;padding: 16px;}
        </style>
        <app-route
        route="[[route]]"
        pattern="/:catid"
        data="{{routeData}}"></app-route>
        <iron-ajax id="xhr_categories" url="{{app.apiHost}}/blog.category.list?app_id={{app.appId}}" last-response="{{categories}}"></iron-ajax>
        <iron-ajax id="xhr_list" url="{{app.apiHost}}/blog.list?app_id={{app.appId}}&start={{start}}&max={{max}}" last-response="{{blogs}}" on-last-response-changed="_loadSuccess"></iron-ajax>
        <iron-ajax id="xhr_list_by_category" url="{{app.apiHost}}/blog.list.by.category?app_id={{app.appId}}&category_id={{selectedCategoryId}}&start={{start}}&max={{max}}" last-response="{{blogs}}" on-last-response-changed="_loadSuccess"></iron-ajax>
        <plugin-content-view visible="{{visible}}" contents="{{layout.blog_top}}" width="[[pageWidth]]"></plugin-content-view>
        <paper-tabs fit-container scrollable hide-scroll-buttons id="nav" selected="{{selectedCategoryId}}" on-selected-changed="_catChanged" attr-for-selected="cid">
            <paper-tab cid="all">全部</paper-tab>
            <template is="dom-repeat" items="{{categories.result}}" as="category">
                <paper-tab cid="{{category.id}}">{{category.title}}</paper-tab>
            </template>
        </paper-tabs>
        <div class="search"><paper-input label="请输入搜索关键词" value="{{keyword}}" no-label-float on-input="_keywordChanged"></paper-input></div>
        <paper-list-box>
            <template is="dom-repeat" items="{{lasyItems}}" as="blog">
                <a href="{{rootPath}}blog-detail/{{blog.id}}">
                <paper-icon-item>
                    <template is="dom-if" if="{{blog.cover}}">
                    <iron-image sizing="contain" src="{{blog.cover}}?imageView2/1/w/80/h/80" slot="item-icon"></iron-image>
                    </template>
                    <template is="dom-if" if="{{!blog.cover}}">
                    <div slot="item-icon"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;padding: 10px;box-sizing: border-box;"><g><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></g></svg></div>
                    </template>
                    
                    <paper-item-body two-line>
                        <div>{{blog.title}}</div>
                        <div secondary>发布时间：{{_date(blog.createtime)}}</div>
                    </paper-item-body>
                    <iron-icon icon="arrow-right"></iron-icon>
                </paper-icon-item>
                </a>
            </template>
        </paper-list-box>
        <plugin-content-view visible="{{visible}}" contents="{{layout.blog_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopBlog extends PluginElement {
            static get observers() {
                return [
                    '_routeChanged(routeData.*)'
                ]
            }
            static get is() {
                return 'shop-blog';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    start:{
                        type:Number,
                        value:0
                    },
                    max:{
                        type:Number,
                        value:20
                    },
                    keyword:String,
                    lasyItems:{
                        type:Array,
                        value:[]
                    },
                    scrollEvent:Object,
                    selectedCategoryId:{
                        type:String,
                        value:"all"
                    }
                }
                
            }
            ready(){
                super.ready();
                this.$.xhr_categories.generateRequest();
            }
            
            _visibleChanged(visible) {
                if(visible){
                    this.scrollEvent = ()=>{this._load();};
                    window.addEventListener("scrollBottom1",this.scrollEvent);
                }else{
                    window.removeEventListener("scrollBottom1",this.scrollEvent);
                }
            }
            _catChanged(e){
                this._page(this.rootPath+"blog/"+e.detail.value);
            }
            _routeChanged(){
                if(app.route.path.startsWith(this.rootPath+"blog")){
                    if(app.route.path==this.rootPath+"blog"){
                        this._page(this.rootPath+"blog/all");
                    }else{
                        this.selectedCategoryId=this.routeData.catid;
                        this.lasyItems = [];
                        this.start = 0;
                        this._load();
                    }
                }
            }
            _keywordChanged(e){
                if(this.inputTimeout){
                    window.clearTimeout(this.inputTimeout);
                }
                this.inputTimeout = window.setTimeout(()=>{
                    this.lasyItems = [];
                    this.start = 0;
                    this._load();
                },1000);
            }
            _load(){
                let query = null;
                if(this.selectedCategoryId&&this.selectedCategoryId!="all"){
                    query = this.$.xhr_list_by_category;
                }else{
                    query = this.$.xhr_list;
                }
                query.params.keyword = "%"+(this.keyword?this.keyword:"")+"%";
                query.generateRequest();
            }
            _loadSuccess(e){
                if(e.detail.value){
                    let result = e.detail.value.result;
                    result.forEach(item=>{
                        this.push("lasyItems",item);
                    });
                    this.loading = false;
                    this.start += this.max;
                }
            }
        }

        customElements.define(ShopBlog.is, ShopBlog);

    </script>

</dom-module>
